<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 字体 -->
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <!-- 初始化CSS -->
    <link rel="stylesheet" href="./css/init.css">
    <!-- head -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- loading -->
    <link rel="stylesheet" href="./css/qiein-loading.css">
    <!-- 公共 -->
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/vue.js"></script>
    <style>
    
    
    /* 搜索栏样式 */
    
    .qiein-search {
        width: 100%;
        height: 100px;
        background-color: #fafafa;
        /*margin: 8px 0px;*/
        padding: 16px;
        box-sizing: border-box;

    }
    /* 每列DIV样式 */
    
    .qiein-search>ul {
        width: 100%;
        height: 100%;
    }
    
    .qiein-search>ul>li {
        width: auto;
        height: 100%;
        float: left;
        /*padding: 0 8px;*/
        box-sizing: border-box;
    }
    
    .qiein-search>ul>li:first-child {
        /*padding: 0 16px 0 0;*/
    }
    
    .time-opt {
        display: inline-block;
    }
    
    .time-start-end>input {
        width: 110px;
        height: 28px;
        line-height: 28px;
        padding-left: 8px;
        background-color: #fff;
        border: 1px solid #e6e6e6;;
        color: #1f2d3d;
        box-shadow: none;
        outline: none;
        font-size: 13px;
        box-sizing: border-box;
        border-radius: 5px;
         transition: border-color .3s cubic-bezier(.65, .05, .35, .5);
    }
    
    .time-start-end>input:hover {
        border-color: #57c5f7;
    }
    
    .time-start-end>input:first-child {
        margin-right: 8px;
    }
    
    .time-start-end>input:focus {
        border-color:#57c5f7;
    }
    
    .time-start-end {
        display: inline-block;
    }
    /* 搜索时间按钮样式 */
    
    .search-time-wrap {
        height: 28px;
        display: inline-block;
    }
    
    .search-time-wrap button {
        width: 80px;
        height: 28px;
        line-height: 28px;
        border: none;
        color: #fff;
        box-shadow: none;
        outline: none;
        font-size: 13px;
        background-color: #23c0fa;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    
    .search-time-wrap button:hover {
        background-color: #4fcdfb;
    }
    
    .search-time-wrap button+span {
        width: 20px;
        height: 28px;
        z-index: 1px;
        position: relative;
        border: 1px solid #eee;
        box-sizing: border-box;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        float: right;
        padding: 0px 0 0 1px;
    }
    
    .search-time-wrap span:hover .search-time-ul-wrap {
        display: block;
    }
    
    .search-time-ul-wrap {
        width: 100px;
        z-index: 100;
        position: absolute;
        left: -80px;
        top: 25px;
        color: #111;
        font-size: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
        box-sizing: border-box;
        border-radius: 6px;
        display: none;
    }
    
    .search-time-ul-wrap ul li {
        min-width: 30px;
        line-height: 25px;
        background-color: #fff;
        cursor: pointer;
        padding: 0px 10px;
        border-bottom: 1px solid #eee;
    }
    
    .search-time-ul-wrap ul li:hover {
        background-color: #eee;
    }
    /* 操作按钮组 */
    
    .operation-ul-wrap ul li {
        width: 40px;
        height: 60px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ccc;
        float: left;
        color: #333;
        border-radius: 6px;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    .operation-ul-wrap ul li:hover {
        color: #0096E0;
        border-color: #0096E0;
    }
    
    .operation-ul-wrap ul li span {
        display: block;
    }
    
    .operation-ul-wrap ul li span:first-child {
        font-size: 23px;
    }
    
    .operation-ul-wrap ul li span:last-child {
        font-size: 13px;
    }
    .search-input{
        width: 110px;
        height: 26px;
        line-height: 26px;
        box-sizing: border-box;
    }
    </style>
</head>

<body>
    <div class="all-contain">
        <div class="qiein-search" id="qiein-search">
            <ul>
                <!-- 1 -->
                <li class="borderR paddingR-1x">
                    <!-- 时间选项 -->
                    <div class="time-opt floatL">
                        <vue-select class="search-input" :selectdata="pageSelectData" :is-filter="isFilter">
                         </vue-select>
                    </div>
                    <div class="time-start-end floatL marginL-1x">
                        <input type="text" placeholder="开始时间" class="floatL" onclick="laydate()" id="startTime">
                        <input type="text" placeholder="结束时间" class="floatL" onclick="laydate()" id="endTime">
                    </div>
                    <!-- 搜索时间按钮样式 -->
                    <div class="search-time-wrap floatL marginL-1x">
                        <button class="btn">搜索</button>
                        <span class="c1"><i class="fa fa-filter"></i><div class="search-time-ul-wrap">
                        <ul>
                            <li onclick="timeSearch.getNowDateSlot()">今日</li>
                            <li onclick="timeSearch.getLastDaySlot()">昨日</li>
                            <li onclick="timeSearch.getThisWeekSlot()">本周</li>
                            <li onclick="timeSearch.getLastWeekSlot()">上周</li>
                            <li onclick="timeSearch.getThisMonthSlot()">本月</li>
                            <li onclick="timeSearch.getLastMonthSlot()">上月</li>
                        </ul>
                    </div></span>
                    </div>
                    <!-- 搜索时间按钮样式 end -->
                </li>
                <!-- 2 -->
                <li class="paddingL-1x">
                    <div class="multiselect-style">
                        <input type="text" placeholder="全部渠道" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox">全部渠道</li>
                            <li>
                                <input type="checkbox">线上</li>
                            <li>
                                <input type="checkbox">A</li>
                            <li>
                                <input type="checkbox">B</li>
                        </ul>
                    </div>
                    <div class="multiselect-style marginT-1x">
                        <input type="text" placeholder="全部人员" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox">全部人员</li>
                            <li>
                                <input type="checkbox">小李</li>
                            <li>
                                <input type="checkbox">小王</li>
                            <li>
                                <input type="checkbox">小于</li>
                        </ul>
                    </div>
                </li>
                <!-- 3 -->
                <li class="paddingL-1x paddingR-1x borderR">
                    <div class="multiselect-style">
                        <input type="text" placeholder="全部类型" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox" value="">全部类型</li>
                            <li>
                                <input type="checkbox" value="1">试婚纱</li>
                            <li>
                                <input type="checkbox" value="2">试西服</li>
                            <li>
                                <input type="checkbox" value="3">领礼品</li>
                            <li>
                                <input type="checkbox" value="4">跟妆</li>
                            <li>
                                <input type="checkbox" value="5">取件</li>
                        </ul>
                    </div>
                </li>
                <!-- 4 -->
                <li class="paddingL-1x">
                    <div class="operation-ul-wrap">
                        <ul>
                            <li class="marginR-1x" id="add"><span><i class="fa fa-plus"></i></span><span>录入</span></li>
                            <li class="marginR-1x"><span><i class="fa fa-times"></i></span><span>删除</span></li>
                            <!--   <li class="marginR-1x"><span><i class="fa fa-sign-out"></i></span><span>导出</span></li> -->
                            <li onclick="location.reload()"><span><i class="fa fa-refresh"></i></span><span>刷新</span></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<!-- select 组件 -->
<template id="vue-select">
    <div class="vue-select-style" :style="{height:height}">
        <div @click="inputClick()">
            <input type="text" v-model="selectdata.text" :readonly="isFilter">
            <i class="fa fa-angle-down" :class="{'vue-select-style-active':selectdata.show}"></i>
        </div>
        <dl v-show="selectdata.show" style="display: none;" :class="{'dl-show':selectdata.show}">
            <dd v-for="option in optionsFilter" :class="{'is-this-opt':option.val==selectdata.lastOpt}" v-text="option.text" @click="optClick(option)"></dd>
        </dl>
    </div>
</template>
<script>
// 注册select组件
Vue.component('vue-select', {
    template: '#vue-select',
    props: {
        isFilter: Boolean,
        height: String,
        selectdata: {
            lastOpt: Number, //上一次选项
            val: Number,
            text: String,
            show: Boolean,
            options: Array
        }
    },
    data: function() {
        return this.selectdata;
    },
    watch: {
        selectdata: {
            handler: function(val, oldVal) {
                if (val.show) {

                };
            },
            deep: true
        }
    },
    created: function() {
        //新建时，让默认值等于第一个选项
        // this.selectdata.val = this.selectdata.options[0].val;
        // this.selectdata.text = this.selectdata.options[0].text;
        window.addEventListener('click', (e) => {
            if (!this.$el.contains(e.target)) {
                if (this.selectdata.show == true) this.selectdata.show = false;
            }
        })
    },
    computed: {
        optionsFilter: function() {
            let temp = this.options.filter((item) => {

                return item.text.toLowerCase().indexOf(this.text.toLowerCase()) != -1
            });
            console.log(temp.length == 0);
            return temp.length == 0 ? [{
                text: '无符合数据',
                val: -1
            }] : temp;
        }
    },
    methods: {
        increment: function() {
            this.counter += 1
            this.$emit('vueSelectChange');
        },
        inputClick: function() {
            this.selectdata.val = '';
            this.selectdata.text = '';
            this.selectdata.show = !this.selectdata.show;
            this.showOpt();
        },
        optClick: function(option) {
            this.selectdata.val = option.val;
            this.selectdata.text = option.text;
            this.selectdata.lastOpt = option.val;
            this.selectdata.show = !this.selectdata.show;
            // 当值未改变时不触发
            if (this.selectdata.val == option.val) return;
            // 触发该子组件事件
            this.$emit('select-change')
        },
        showOpt: function() {
            //根据距离下方的距离，判断展示方向
            //let a=this.$el.querySelector("dl").clientHeight;
            let elBottom = this.$el.getBoundingClientRect().bottom;
            let clintBottom = document.body.clientHeight;
            let bottom = clintBottom - elBottom;
            let dtHeight = (this.selectdata.options.length * 32) + 6;
            if (bottom < dtHeight) {
                this.$el.querySelector("dl").style.top = (0 - (dtHeight + 2)) + 'px';
            } else {
                this.$el.querySelector("dl").style.top = 34 + 'px';
            }
        }
    },
})
var pageSelectData = {
    lastOpt: null,
    val: 0,
    text: '',
    show: false,
    options: [{
        text: '预约时间',
        val: 100
    }, {
        text: '录入时间',
        val: 200
    }, {
        text: '到店时间',
        val: 400
    }]
};
var searchRowVue = new Vue({
    el: '#qiein-search',
    data: {
        height: '500px',
        isFilter: true,
        pageSelectData: pageSelectData
    }
});
</script>

</html>
